<template>
	<view class="message-view">
		<!-- 分类 -->
		<view v-if="commentList.length">
			<view class="menu-block">
				<block v-for="(item,index) in cardList" :key="index">
					<view :class="{activetext: index == currentCardIndex}" @click="cardClick(index,item)">{{item}}
					</view>
				</block>
			</view>
			<!-- 评价 -->
			<block v-for="(item,index) in messageData" :key="index">
				<view class="message-dist">
					<view class="users-message">
						<view class="cont-name">
							<image :src="item.avatarUrl" mode="widthFix"></image>
							<text>{{item.nickName}}</text>
						</view>
						<!-- 时间 -->
						<view class="message-time">
							{{item.time}}
						</view>
					</view>
					<view class="cont-name-text">
						<text>{{item.usermess}}</text>
					</view>
				</view>
			</block>
		</view>
		<!-- 没有评论的情况 -->
		<view class="claenpty" v-else>该商家还没有商品评论哦!</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 评论列表
			commentList: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				// 当前选项卡索引
				currentCardIndex: 0,
				// 评论分类
				cardList: [],
				// 分类详情内容
				messageData: []
			}
		},

		methods: {
			// 评价分类
			cardClick(index, cardName) {
				this.currentCardIndex = index
				// 更新当前分类内容详情
				this.messageData = this.commentList.filter(item => {
					if (cardName === '全部') {
						return !!item.classmessage
					}
					return item.classmessage === cardName
				}).map(item => {
					return item.messagedata
				}).sort((a, b) => {
					return new Date(b.time).getTime() - new Date(a.time).getTime()
				})
			}
		},

		watch: {
			commentList() {
				// 初始化分类卡列表
				this.cardList = ['全部', ...new Set(this.commentList.filter(item => {
					return !!item.classmessage
				}).map(item => {
					return item.classmessage
				}))]
				// 初始化当前分类内容详情
				this.messageData = this.commentList.filter(item => {
					return !!item.classmessage
				}).map(item => {
					return item.messagedata
				}).sort((a, b) => {
					return new Date(b.time).getTime() - new Date(a.time).getTime()
				})
			}
		}
	}
</script>

<style scoped>
	.message-view {
		margin: 0 20upx 100upx 20upx;
	}

	.activetext {
		color: #4CD964;
		background: #ffdd00 !important;
		border: 1px solid #ffdd00 !important;
	}

	.menu-block view {
		background: #ffffff;
		border: 1px solid #c2c5cc;
		border-radius: 6upx;
		font-size: 25upx;
		color: #292c33;
		font-weight: bold;
		text-align: center;
		padding: 15upx;
		margin: 10upx 15upx 5upx 0;
	}

	.menu-block {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
		/* margin-bottom: 20upx; */
	}

	/* 评价 */
	.users-message {
		display: flex;
		justify-content: space-between;
		height: 50upx;
		align-items: center;
		margin-bottom: 15upx;
	}

	.message-time {
		font-size: 25upx;
		color: #a8a8a8;
	}

	.cont-name image {
		width: 50upx !important;
		height: 50upx !important;
		border-radius: 50%;
		margin-right: 9upx;
	}

	.cont-name text {
		font-size: 30upx;
		color: #a8a8a8;
	}

	.cont-name {
		display: flex;
		align-items: center;
		height: 50upx;
	}

	.cont-name-text text {
		font-size: 27upx;
		color: #333333;
		line-height: 1.5;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.message-dist {
		margin-top: 30upx;
		border-bottom: 1rpx solid #f8f8f8;
		padding-bottom: 25upx;
	}

	/* 没有评价 */
	.claenpty {
		font-size: 30upx;
		color: #cccccc;
		text-align: center;
		padding-top: 40upx;
	}
</style>
